<template>
  <div class="app-page">
    <div class="app-page-toolbar">
      <div class="app-page-toolbar__filter">
        <el-input v-model="list.filter.search" placeholder="请输入内容" />
        <div style="display: flex;">
          <el-button type="primary" @click="listGet">查询</el-button>
          <el-button @click="resetFilter">重置</el-button>
        </div>
      </div>
      <div class="app-page-toolbar__action" style="padding-right: 3px;">
        <el-button type="primary" @click="handleEdit(null)">新增接收者</el-button>
        <el-button @click="$router.go(-1)">返回</el-button>
        <el-dropdown @command="handleCommand">
          <el-button type="primary">
            全部切换<el-icon class="el-icon--right"><arrow-down /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item :command="'disable'">全部禁用</el-dropdown-item>
              <el-dropdown-item :command="'enable'">全部启用</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <div class="app-page-table">
      <el-table v-loading="list.loading" :data="list.data" @selection-change="handleSelect" border style="width: 100%" height="100%" show-overflow-tooltip>
        <el-table-column type="selection" width="40" align="center" />
        <el-table-column type="index" label="序号" width="80" align="center" />
        <el-table-column prop="email" label="邮箱地址" min-width="150" align="center" />
        <el-table-column prop="remark" label="备注" min-width="150" align="center" />
        <el-table-column label="状态" min-width="100" align="center">
          <template #default="{ row }">
            <el-tag
              effect="dark"
              :type="row.status ? 'success' : 'info'">
              {{ row.status ? '启用' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createdAt" label="创建时间" min-width="100" align="center">
          <template #default="{ row }">
            {{ useTimeFromNow(row.createdAt) }}
          </template>
        </el-table-column>
        <el-table-column prop="updatedAt" label="更新时间" min-width="100" align="center">
          <template #default="{ row }">
            {{ useTimeFromNow(row.updatedAt) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="260" align="center"  fixed="right">
          <template #default="{ row }">
            <el-button type="primary" @click="handleEdit(row)">编辑</el-button>
            <el-button type="primary" @click="handleToggle(row)">{{ row.status ? '禁用' : '启用' }}</el-button>
            <el-button type="danger" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="app-page-pagination">
      <el-pagination
        background
        layout="total, prev, pager, next"
        :page-size="list.size"
        :current-page="list.page"
        :total="list.total"
        @current-change="handlePageChange"/>
    </div>
    <receiver-dialog v-if="visible" v-model="visible" :detail="item" :author_type="'answer'" @submit="listGet"></receiver-dialog>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref, type Ref } from 'vue';
import ReceiverDialog from './ReceiverDialog.vue';
import { useConfirm, useMessage, useTimeFromNow } from '@/utils/utils';
import http from '@/utils/http'
import type { AuthorInter, ReceiverInter } from '@/typings/interface';
import { ArrowDown } from '@element-plus/icons-vue'

const visible = ref(false)
const item: Ref<ReceiverInter | null> = ref(null)
const list = reactive({
  page: 1,
  size: 10,
  total: 0,
  loading: true,
  filter: {
    search: '',
    author_type: 'answer'
  },
  data: [],
  selected: []
})

// 获取列表
function listGet () {
  list.loading = true
  http('/author/receiver/list', {
    page: list.page,
    size: list.size,
    ...list.filter
  }).then((res: any) => {
    const { total, items } = res.data
    list.total = total
    list.data = items
    list.loading = false
  })
}
listGet()
// 重置筛选
function resetFilter () {
  list.filter.search = ''
  listGet()
}
// 监听页码改变
function handlePageChange (value: number) {
  list.page = value
  listGet()
}
// 编辑
function handleEdit (row: AuthorInter | null) {
  item.value = row
  visible.value = true
}
// 删除
function handleDelete (row: AuthorInter) {
  useConfirm('确定删除该条记录吗?').then(() => {
    http('/author/receiver/delete', {
      id: row.id
    }).then(res => {
      useMessage('删除成功')
      listGet()
    })
  })
}
function handleToggle (row: AuthorInter) {
  useConfirm(`确定${ row.status ? '禁用' : '启用' }该条记录吗?`).then(() => {
    http('/author/receiver/update', {
      id: row.id,
      status: !row.status
    }).then(res => {
      useMessage(`${ row.status ? '禁用' : '启用' }成功`)
      listGet()
    })
  })
}
function handleSelect (rows) {
  list.selected = rows
}
function handleCommand (command) {
  const status = { disable: '禁用', enable: '启用' }
  useConfirm(`确定${status[command]}这些记录吗?`).then(() => {
    const promises = list.selected.map(row => {
      return http('/author/receiver/update', {
        id: row.id,
        status: command === 'disable' ? false : true
      })
    })
    Promise.all(promises).then(res => {
      useMessage(`${status[command]}成功`)
      listGet()
    })
  })
}
</script>
<style lang="scss">
</style>